<template>
    <div id="worktake">
        <top-tabbar title="坐席状态"/>
        <!--border边框背景-->
        <div class="workcategroy_bg_border_box">
            <img class="workcategroy_bg_border" src="~assets/img/workcategory/workcategroy_bg_border.png" alt="">
        </div>

        <div class="chart_box">
            <div class="chart_box_item">
                <zx-tianqi></zx-tianqi>
                <zx-tongji class="sb_tianqi"></zx-tongji>
                <zx-yewu class="sb_tianqi"></zx-yewu>
            </div>

            <div class="chart_box_item2">
                <zx-real></zx-real>
            </div>

            <div class="chart_box_item">
                <zx-leixing></zx-leixing>
                <zx-yeji class="sb_statistics"></zx-yeji>
            </div>
        </div>

    </div>
</template>

<script>
    // all
    import topTabbar from 'components/common/topTabbar/topTabbar'
    import heightChart from 'components/content/heightChart/heightChart'
    import lowChart from 'components/content/lowChart/lowChart'
    //left
    import zxTianqi from 'views/workTake/zxTianqi/zxTianqi'
    import zxTongji from 'views/workTake/zxTongji/zxTongji'
    import zxYewu from 'views/workTake/zxYewu/zxYewu'

    // center
    import zxReal from 'views/workTake/zxReal/zxReal'

    // right
    import zxLeixing from 'views/workTake/zxLeixing/zxLeixing'
    import zxYeji from 'views/workTake/zxYeji/zxYeji'

    export default {
        name: "worktake",
        components: {
            topTabbar,
            heightChart,
            lowChart,

            zxTianqi,//天气
            zxTongji,//状态统计
            zxYewu,//业务状态
            zxReal,//实时
            zxLeixing,//业务类型
            zxYeji,//部门业绩

        },
        mounted() {

        },

    }
</script>

<style scoped>
    #worktake {
		position: relative;
		box-sizing: border-box;
        width: 100%;
        height: 1080px;
        background: url("../../assets/img/workcategory/workcategory_bg.png");
        background-size: 100%;
        overflow: hidden;
    }

    .workcategroy_bg_border_box {
        position: absolute;
        top: 20px;
        right: 20px;
        left: 20px;
        bottom: 20px;
    }

    .workcategroy_bg_border_box img {
        width: 100%;
        height: 100%;
    }

    .chart_box {
        /*border: 1px solid red;*/
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 0 60px;
    }

    .chart_box_item {
        padding-top: 20px;
        width: 610px;
        /*height: 100%;*/
        align-items: stretch;
    }

    .chart_box_item2 {
        padding-top: 20px;
        width: 570px;
        /*height: 100%;*/
        align-items: stretch;
    }

    .left_top_height {
        margin-bottom: 50px;
    }

    .low_top_bottom {
        margin: 15px 0;
    }

    .sb_tianqi{
        margin-top: 30px;
    }
    .sb_statistics {
        margin-top: 45px;
    }

</style>
